
<%= turbo_frame_tag 'issue_label_form' do %>
<%= render Modal::DialogComponent.new(
  title: issue_label.persisted? ? "#{t("actions.edit")} #{IssueLabel.model_name.human}" : "#{t("actions.create")} #{IssueLabel.model_name.human}",
  icon: icon_for(:issue_labels)) do %>

  <div class="space-y-4">
    <%= form_with(model: [current_project, issue_label], html: { class: 'flex flex-col gap-2', data: { turbo_frame: "_top" } }) do |f| %>
      <% if issue_label.errors.any? %>
        <div class="alert alert-error">
          <%= issue_label.errors.full_messages.to_sentence.capitalize %>
        </div>
      <% end %>

      <fieldset class="fieldset">
        <%= f.label :title, IssueLabel.human_attribute_name(:title), class: "fieldset-legend" %>
        <%= f.text_field :title, autofocus: true, required: true, class: "input w-full" %>
      </fieldset>

      <fieldset
        class="fieldset"
        data-controller="color-input"
        data-color-input-issue-preview-outlet=".js-issue-preview-outlet"
        >
        <%= f.label :hex_color, IssueLabel.human_attribute_name(:hex_color), class: "fieldset-legend" %>
        <fieldset class="relative" data-color-input-target="wrapper">
          <%= f.text_field :hex_color, required: true, class: "input", data: { color_input_target: "input" } %>
        </fieldset>
      </fieldset>

      <div
        class="fieldset js-issue-preview-outlet"
        data-controller="issue-preview"
        >
        <p><%= t(".card_preview") %></p>

        <div class="relative flex flex-row gap-2 text-sm text-base-content/40 border border-base-content/10 bg-base-100 rounded-box card p-3"
        >
          <div class="rounded-lg bg-neutral-content animate-pulse" style="width: 4px;"></div>
          <div class="flex flex-col gap-2 grow">
            <span class="bg-neutral-content h-4 rounded animate-pulse"></span>

            <div class="grid gap-1 grid-cols-10">
              <span class="issue-label bg-neutral-content h-4 col-span-2 rounded" data-issue-preview-target="backgroundColor"></span>
              <span class="issue-label bg-neutral-content h-4 col-span-3 rounded" data-issue-preview-target="backgroundColor"></span>
              <span class="issue-label bg-neutral-content h-4 col-span-1 rounded" data-issue-preview-target="backgroundColor"></span>
            </div>
            <div class="flex flex-row items-stretch justify-start gap-3 text-base-content animate-pulse">
              <div class="h-4 w-4 rounded bg-neutral-content"></div>
              <div class="h-4 w-4 rounded bg-neutral-content"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex gap-2 justify-center mt-2">
        <a class="btn btn-ghost" data-action="click->modal#close">
          <%= t('actions.cancel') %>
        </a>

        <% text = issue_label.persisted? ? t('actions.update') : t('actions.create') %>
        <%= f.button text, class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>

<% end %>
<% end %>
